<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        
        
        <link rel="shortcut icon" href="../img/favicon.ico">
        <title>ButtonArray - My Docs</title>
        <link href="../css/bootstrap.min.css" rel="stylesheet">
        <link href="../css/font-awesome.min.css" rel="stylesheet">
        <link href="../css/base.css" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/github.min.css">

        <script src="../js/jquery-1.10.2.min.js" defer></script>
        <script src="../js/bootstrap.min.js" defer></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
        <script>hljs.initHighlightingOnLoad();</script> 
    </head>

    <body>
        <div class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary">
            <div class="container">
                <a class="navbar-brand" href="..">My Docs</a>
                <!-- Expander button -->
                <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-collapse">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <!-- Expanded navigation -->
                <div id="navbar-collapse" class="navbar-collapse collapse">
                        <!-- Main navigation -->
                        <ul class="nav navbar-nav">
                            <li class="navitem">
                                <a href=".." class="nav-link">Pygame Widgets</a>
                            </li>
                            <li class="navitem">
                                <a href="../animations/" class="nav-link">Animations</a>
                            </li>
                            <li class="navitem">
                                <a href="../button/" class="nav-link">Button</a>
                            </li>
                            <li class="navitem active">
                                <a href="./" class="nav-link">ButtonArray</a>
                            </li>
                            <li class="navitem">
                                <a href="../combobox/" class="nav-link">ComboBox</a>
                            </li>
                            <li class="navitem">
                                <a href="../common/" class="nav-link">Common</a>
                            </li>
                            <li class="navitem">
                                <a href="../dropdown/" class="nav-link">Dropdown</a>
                            </li>
                            <li class="navitem">
                                <a href="../progressbar/" class="nav-link">Progress Bar</a>
                            </li>
                            <li class="navitem">
                                <a href="../slider/" class="nav-link">Slider</a>
                            </li>
                            <li class="navitem">
                                <a href="../textbox/" class="nav-link">TextBox</a>
                            </li>
                            <li class="navitem">
                                <a href="../toggle/" class="nav-link">Toggle</a>
                            </li>
                        </ul>

                    <ul class="nav navbar-nav ml-auto">
                        <li class="nav-item">
                            <a href="#" class="nav-link" data-toggle="modal" data-target="#mkdocs_search_modal">
                                <i class="fa fa-search"></i> Search
                            </a>
                        </li>
                            <li class="nav-item">
                                <a rel="prev" href="../button/" class="nav-link">
                                    <i class="fa fa-arrow-left"></i> Previous
                                </a>
                            </li>
                            <li class="nav-item">
                                <a rel="next" href="../combobox/" class="nav-link">
                                    Next <i class="fa fa-arrow-right"></i>
                                </a>
                            </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                    <div class="col-md-3"><div class="navbar-light navbar-expand-md bs-sidebar hidden-print affix" role="complementary">
    <div class="navbar-header">
        <button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#toc-collapse" title="Table of Contents">
            <span class="fa fa-angle-down"></span>
        </button>
    </div>

    
    <div id="toc-collapse" class="navbar-collapse collapse card bg-secondary">
        <ul class="nav flex-column">
            
            <li class="nav-item" data-level="1"><a href="#buttonarray" class="nav-link">ButtonArray</a>
              <ul class="nav flex-column">
            <li class="nav-item" data-level="2"><a href="#example-usage" class="nav-link">Example Usage</a>
              <ul class="nav flex-column">
              </ul>
            </li>
            <li class="nav-item" data-level="2"><a href="#mandatory-parameters" class="nav-link">Mandatory Parameters</a>
              <ul class="nav flex-column">
              </ul>
            </li>
            <li class="nav-item" data-level="2"><a href="#optional-parameters" class="nav-link">Optional Parameters</a>
              <ul class="nav flex-column">
              </ul>
            </li>
              </ul>
            </li>
        </ul>
    </div>
</div></div>
                    <div class="col-md-9" role="main">

<h1 id="buttonarray">ButtonArray</h1>
<p>A collection of buttons with similar properties.</p>
<h2 id="example-usage">Example Usage</h2>
<p><em>Note: See <a href="../examples/button_array_example.py">example</a></em></p>
<pre><code class="language-Python">import pygame
from pygame_widgets import ButtonArray

pygame.init()
win = pygame.display.set_mode((600, 600))

buttonArray = ButtonArray(win, 50, 50, 500, 500, (2, 2),
                          border=100, texts=('1', '2', '3', '4')
                          )

run = True
while run:
    events = pygame.event.get()
    for event in events:
        if event.type == pygame.QUIT:
            pygame.quit()
            run = False
            quit()

    win.fill((255, 255, 255))

    buttonArray.listen(events)
    buttonArray.draw()

    pygame.display.update()
</code></pre>
<h2 id="mandatory-parameters">Mandatory Parameters</h2>
<p><em>Note: Mandatory parameters must be supplied in order.</em></p>
<table>
<thead>
<tr>
<th align="center">Parameter</th>
<th>Description</th>
<th align="center">Type</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">shape</td>
<td>Number of columns and rows of buttons (columns, rows).</td>
<td align="center">(int, int)</td>
</tr>
</tbody>
</table>
<h2 id="optional-parameters">Optional Parameters</h2>
<p><em>Note: Optional parameters of ButtonArray are similar to those of Button.</em></p>
<table>
<thead>
<tr>
<th align="center">Parameter</th>
<th>Description</th>
<th align="center">Type</th>
<th align="center">Default</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">colour</td>
<td>Background colour of array.</td>
<td align="center">(int, int, int)</td>
<td align="center">(210, 210, 180)</td>
</tr>
<tr>
<td align="center">border</td>
<td>Thickness between buttons and between the edges of array and buttons.</td>
<td align="center">int</td>
<td align="center">10</td>
</tr>
<tr>
<td align="center">topBorder</td>
<td>Thickness between top of array and top of button. Overrides border.</td>
<td align="center">int</td>
<td align="center">border</td>
</tr>
<tr>
<td align="center">bottomBorder</td>
<td>Thickness between bottom of array and bottom of button. Overrides border.</td>
<td align="center">int</td>
<td align="center">border</td>
</tr>
<tr>
<td align="center">leftBorder</td>
<td>Thickness between left of array and left of button. Overrides border.</td>
<td align="center">int</td>
<td align="center">border</td>
</tr>
<tr>
<td align="center">rightBorder</td>
<td>Thickness between right of array and right of button. Overrides border.</td>
<td align="center">int</td>
<td align="center">border</td>
</tr>
<tr>
<td align="center">separationThickness</td>
<td>Thickness between buttons. Overrides border.</td>
<td align="center">int</td>
<td align="center">border</td>
</tr>
</tbody>
</table></div>
            </div>
        </div>

        <footer class="col-md-12">
            <hr>
            <p>Documentation built with <a href="https://www.mkdocs.org/">MkDocs</a>.</p>
        </footer>
        <script>
            var base_url = "..",
                shortcuts = {"help": 191, "next": 78, "previous": 80, "search": 83};
        </script>
        <script src="../js/base.js" defer></script>
        <script src="../search/main.js" defer></script>

        <div class="modal" id="mkdocs_search_modal" tabindex="-1" role="dialog" aria-labelledby="searchModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="searchModalLabel">Search</h4>
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            </div>
            <div class="modal-body">
                <p>From here you can search these documents. Enter your search terms below.</p>
                <form>
                    <div class="form-group">
                        <input type="search" class="form-control" placeholder="Search..." id="mkdocs-search-query" title="Type search term here">
                    </div>
                </form>
                <div id="mkdocs-search-results" data-no-results-text="No results found"></div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div><div class="modal" id="mkdocs_keyboard_modal" tabindex="-1" role="dialog" aria-labelledby="keyboardModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="keyboardModalLabel">Keyboard Shortcuts</h4>
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            </div>
            <div class="modal-body">
              <table class="table">
                <thead>
                  <tr>
                    <th style="width: 20%;">Keys</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="help shortcut"><kbd>?</kbd></td>
                    <td>Open this help</td>
                  </tr>
                  <tr>
                    <td class="next shortcut"><kbd>n</kbd></td>
                    <td>Next page</td>
                  </tr>
                  <tr>
                    <td class="prev shortcut"><kbd>p</kbd></td>
                    <td>Previous page</td>
                  </tr>
                  <tr>
                    <td class="search shortcut"><kbd>s</kbd></td>
                    <td>Search</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

    </body>
</html>
